<template>
  <div class="search-index">
    <Header></Header>
    <section>
      <div class="search-history" v-if='searchArr.length'>
        <h2>
          <i class="iconfont icon-shijian"></i>
          <span>历史记录</span>
          <span @click='deleteStorage'>清空历史记录</span>
        </h2>
        <ul>
          <li v-for='(item, index) in searchArr' :key="index" @click='goSearchList(item)'>{{ item }}</li>

        </ul>
      </div>
      <div class="search_null" v-else>
        <h2>暂无搜索记录...</h2>
      </div>
    </section>
    <footer ref="wrapper">
      <div>
        <div v-for="(item, index) in newData" :key="index">
          <Like v-if='item.type == "likeList"' :likeList='item.data'></Like>
        </div>
        <Bottom></Bottom>
      </div>
    </footer>
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from '@/components/search/Header.vue'
import Like from '@/components/home/Like.vue'
import Bottom from '@/components/home/Bottom.vue'
//引入插件
import { MessageBox } from 'mint-ui'
import BetterScroll from 'better-scroll'
import Http from '@/common/api/request.js'
export default {
  name: '',
  components: {
    Tabbar,
    Header,
    Like,
    Bottom

  },
  data() {
    return {
      searchArr: [],
      newData: [],
      oBetterScroll: ''
    };
  },
  created() {
    if (!localStorage.getItem('searchList')) {
      localStorage.setItem('searchList', '[]')
    }
    this.searchArr = JSON.parse(localStorage.getItem('searchList'))
    this.addData()


  },
  mounted() {
  },
  methods: {
    deleteStorage() {
      MessageBox({
        title: '提示',
        message: '确定要清空历史记录吗？',
        showCancelButton: true,
      }).then(res => {
        if (res == 'confirm') {
          //删除本地存储
          localStorage.removeItem('searchList')
          //清除数据
          this.searchArr = []
          //添加一个本地存储
          localStorage.setItem("searchList", "[]")
        }
      })
    },
    goSearchList(item) {
      this.$router.push({
        name: 'SearchList',
        query: {
          key: item
        }
      })
    },
    async addData() {
      let res = await Http.$axios({
        url: '/api/index_list/0/data/1'
      })
      if (res.constructor != Array) {
        this.newData = res.data
      } else {
        this.newData = res
      }
      // 当dom都加载完毕了再去执行
      if (this.$refs.wrapper) {
        this.$nextTick(() => {
          this.oBetterScroll = new BetterScroll(this.$refs.wrapper, {
            movable: true,
            zoom: true,
            click: true
          })
        })
      }

    },
  },

};
</script>

<style scoped>
.search-index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

section {
  /* flex: 1; */
  background-color: #f5f5f5;
  overflow: hidden;
}

footer {
  flex: 3;
  background-color: #f5f5f5;
  overflow: hidden;
}

.search-history h2 {
  position: relative;
  padding: 0.533333rem;
  font-weight: 400;
  font-size: 0.48rem;
}

.search-history h2 i {
  padding-right: 0.08rem;
  color: red;
  font-size: 0.48rem;
}

.search-history h2 span {
  font-size: 15px;
  font-family: 'SimSun';
  line-height: 23px;
}

.search-history h2 span:last-child {
  position: absolute;
  right: 0.533333rem;

}

.search-history ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.266666rem;
}

.search-history ul li {
  margin: 0.266666rem;
  padding: 0.08rem 0.16rem;
  font-size: 0.373333rem;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 20%;
}

.search_null h2 {
  position: relative;
  padding: 0.533333rem;
  font-weight: 400;
  font-size: 0.48rem;
}
</style>


